#work-detail {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    zoom: 1;

    @include clearfix();

    &.edit {
        padding-top: 32px;
        max-width: 1600px;

        #cast-viewport {
            max-width: 800px;
            height: 600px;
        }
    }

    &.embed {
        width: 100%;
        height: 100%;
        max-width: initial;

        #cast-viewport {
            max-width: initial;
            width: 100%;
            height: 100%;
            padding: 0;
        }
    }

    .user-avatar {
        height: 36px;
        display: none;
        line-height: 36px;
        margin: 12px 0 12px 0;

        img {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            float: left;
        }

        .name {
            line-height: 36px;
            font-size: 18px;
            margin-left: 10px;
        }
    }

    #cast-viewport {
        position: relative;
        max-width: 1096px;
        width: 100%;
        height: 779px;
        background-color: #E4E4E4;
        float: left;
        cursor: pointer;

        &.embed {
            max-width: initial;
            width: 100%;
            height: 100%;
        }

        &.fullscreen {
            max-width: initial;
            height: 100%;
        }

        canvas {
            width: 100% !important;
            height: 100% !important;
        }

        button {
            position: absolute;
            display: block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #000;
            opacity: 0.5;
            border: none;
            outline: none;

            i {
                position: absolute;
                left: 7px;
                top: 8px;
                color: #FFF;
                font-size: 25px;
                font-weight: 500;
            }

            &:hover i {
                font-weight: 600;
            }

            &.move {
                right: 80px;
                bottom: 25px;
            }

            &.full-screen {
                right: 25px;
                bottom: 25px;
            }
        }

        .progress, .error {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1000;
        }

        .error {
            text-align: center;
            padding: 20px;
            line-height: 40px;
            border-radius: 3px;
            background: rgba(0, 0, 0, .5);
            color: #FFF;

            & > icon {
                font-size: 36px;
                color: #FFF;
                fill: #FFF;
                -webkit-text-fill-color: #FFF;
            }
        }

        .mask {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: #282828;
            opacity: 0.8;
            z-index: 999;
        }
    }

    #work-info {
        background-color: #FFF;
        padding: 30px 25px;
        overflow: auto;
        color: #979797;
        min-width: 200px;
        overflow-x: hidden;

        h1 {
            font-size: 24px;
            font-weight: 600;
            color: #282828;
            margin-bottom: 13px;
        }

        .author {
            font-size: 16px;
            color: #0084ff;
            margin-left: 8px;
        }

        hr {
            height: 1px;
            background-color: #f0f0f0;
            margin: 25px 0;
            border: none;
        }

        .attribute {

            .attr-group {
                margin-bottom: 16px;

                i {
                    font-size: 16px;
                    display: inline-block;
                    transform: translate(0, 2px);
                }

                span {
                    margin-left: 23px;
                }
            }
        }

        .overlay {
            display: none;
        }

        .textarea {
            width: 100%;
            max-height: 350px;
            overflow: auto;
            line-height: 24px;
            border: none;
            hyphens: manual;
            outline: none;
            resize: none;
        }

        .show-all {
            text-align: center;
            font-size: 14px;
            margin-top: 10px;
            display: none;

            span {
                padding: 0 10px;
                cursor: pointer;
            }

            i {
                transform: translate(6px, 1px);
                display: inline-block;
            }
        }

        .share-in-mobile {
            text-align: center;
            width: 100%;
            display: none;
            margin-top: 30px;
            font-size: 16px;

            button {
                width: 100%;
                background-color: #00A7B3;
                color: #FFF;
            }
        }

        .billboard {
            display: none;
            margin-top: 40px;

            .splitter {
                font-size: 24px;
                text-align: center;
                font-weight: 300;
                color: #979797;
                margin-top: 20px;
                border-top: solid 1px #D7D7D7;

                span {
                    margin-top: -10px;
                    display: block;
                    background-color: #FFF;
                    width: 230px;
                    font-size: 12px;
                    margin-left: auto;
                    margin-right: auto;
                }
            }

            .board-section {
                position: relative;
                text-align: center;
                white-space: nowrap;
                margin-top: 20px;

                & > * {
                    vertical-align: middle;
                }

                &.section1 {

                    .joke {
                        transform: translate(0, -15px);
                    }
                }

                &.section2 {

                    .joke {
                        text-align: left;
                        padding-left: 20px;
                        padding-right: 20px;
                        transform: translate(0, -20px);
                    }
                }

                &.section3 {
                    text-align: center;

                    .joke {
                        transform: translate(50%, 0);
                    }
                }

                &.section4 {
                    margin-top: 0;
                }

                .img-1 {
                    width: 100px;
                    margin-left: 20px;
                    margin-right: 10px;
                }

                .img-2 {
                    width: 100px;
                    margin-right: 10px;
                }

                .img-3 {
                    display: block;
                    width: 100%;
                    margin-top: -30px;
                }

                .img-body {
                    display: block;
                    width: 100%;
                }

                .joke {
                    background-color: #57AEFF;
                    color: #FFF;
                    font-size: 14px;
                    padding: 10px;
                    border-radius: 4px;
                    position: relative;
                    max-width: 320px;
                    display: inline-block;
                    white-space: normal;

                    &:after {
                        content: " ";
                        position: absolute;
                        border-left: 5px solid transparent;
                        border-right: 5px solid transparent;
                        border-top: 5px solid #57AEFF;
                    }

                    &.left-caret:after {
                        bottom: -5px;
                        left: 15px;
                    }

                    &.right-caret:after {
                        bottom: -5px;
                        right: 15px;
                    }

                    &.repost {
                        background-color: #00a7b3;
                        color: #FFF;
                    }

                    &.top-caret:after {
                        border-top: 5px solid transparent;
                        border-bottom: 5px solid #00a7b3;
                        top: -10px;
                        right: 25px;
                    }
                }

                &.tip {
                    position: fixed;
                    top: -13px;
                    right: 5px;
                    width: 130px;
                    text-align: left;
                    line-height: 1.43;
                    font-size: 28px;
                    z-index: 1001;
                }
            }

            p {
                text-align: center;

                &.img-caption {
                    margin-top: 10px;
                    color: #5a5a5a;
                }

                &.p2 {
                    color: #0084ff;
                    a {
                        color: #0084ff;
                        text-decoration: underline;
                    }
                }
            }
        }

        &.mine {
            button.share {
                width: 100%;
            }

            .edit-btn {
                width: 100%;
                border-radius: 4px;
                border: solid 1px #979797;
                height: 40px;
                background-color: #FFF;
                margin-top: 16px;
                outline: none;

                display: inline-block;
                text-align: center;
                vertical-align: middle;
                color: inherit;
                line-height: 40px;

                &:hover {
                    background-color: #5A5A5A;
                    color: #FFF;
                }
            }
        }

        button {
            border-radius: 4px;
            border: solid 1px #979797;
            height: 40px;
            background-color: #FFF;
            margin-top: 16px;
            outline: none;

            &.like {
                margin-top: 50px;
                width: 100%;
                display: block;

                &:hover {
                    background-color: #5a5a5a;
                    color: #ff8f9e;
                }
            }

            &.share {
                //width: calc(100% - 50px);
                width: 100%;
            }

            &.report {
                margin-left: 8.8px;
                width: 40px;
                height: 40px;
                float: right;

                i {
                    transform: translate(4px, 2px);
                }
            }

            i {
                font-size: 16px;
                margin-right: 10px;
                transform: translate(0, 2px);
                display: inline-block;
            }
        }
    }
}

@media (max-width: 750px) {
    body {
        user-select: none;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        -webkit-tap-highlight-color: transparent;
    }
    #work-detail {

        background-color: #FFF;

        .intro {
            display: none;
        }

        hr {
            display: none;
        }

        .user-avatar {
            display: block;
            padding: 0 12px;
            // background-color: #FFF;
        }

        #cast-viewport {
            padding: 0 12px;
            background-color: inherit;
            height: 380px;

            &.embed {
                padding: 0;
                height: 100%;
            }
        }

        #work-info {
            padding-left: 12px;
            padding-right: 12px;
            padding-top: 12px;

            .desc-container {
                position: relative;
            }

            .textarea {
                max-height: 100px !important;
                overflow: hidden !important;
                display: block;
                pointer-events: none;
            }

            .overlay {
                background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%);
                position: absolute;
                width: 100%;
                height: 30px;
                bottom: 0px;
                text-align: center;
                display: block;

                span {
                    transform: translate(10px, 3px);
                    display: block;
                }
            }

            .show-all {
                display: block;
            }

            .share-in-mobile {
                display: block;
            }

            .billboard {
                display: block;
            }

            .pc-buttons {
                display: none;
            }

        }
    }
}
